<template>
	<view>

		<view class="cu-list grid col-4 no-border guoshao-view" style="padding: 10px 8px;">
			<view :class="'guoshao-item cu-item ' + (select == 0 ? 'select' : '')" data-index="0"
				@click.stop.prevent="activeClick">
				<text :class="select == 0 ? 'text' : 'notext'">全部</text>
			</view>
			<view :class="'guoshao-item cu-item ' + (select == 2 ? 'select' : '')" data-index="2"
				@click.stop.prevent="activeClick">
				<text :class="select == 2 ? 'text' : 'notext'">已通过</text>
			</view>
			<view :class="'guoshao-item cu-item ' + (select == 1 ? 'select' : '')" data-index="1"
				@click.stop.prevent="activeClick">
				<text :class="select == 1 ? 'text' : 'notext'">审核中</text>
			</view>
			<view :class="'guoshao-item cu-item ' + (select == 3 ? 'select' : '')" data-index="3"
				@click.stop.prevent="activeClick">
				<text :class="select == 3 ? 'text' : 'notext'">未通过</text>
			</view>
		</view>

		<view class="container">
			<view class="list-box data-v-0034d6f4">
				<block v-for="(item,index) in postsLast" :key="index">
					<view style="width: 33.33%;">
						<view class='cu-tag radius bg-cyan guoshao-tags' v-if="item.topping == 1">
							置顶
						</view>
						<image :src="item.thumbnail" mode="aspectFill" class="image data-v-0034d6f4" :index="index"
							:data-id="item.id" :data-top="item.topping" @click.stop.prevent="handlerDetailClick">
						</image>
						<view class="filmTitle">
							{{item.title}}
						</view>
						<view class="guoshao-view-my" v-if="!isBatchDel">
							<!-- <text class="cuIcon-down text-white guoshao-down"></text> -->
							<!-- <text class="guoshao-down-count">{{item.downCount}}</text> -->
							<text class="cuIcon-timefill text-yellow guoshao-shenhe" v-if="item.status == 1"></text>
							<text class="cuIcon-roundcheckfill text-green guoshao-shenhe"
								v-if="item.status == 2"></text>
							<text class="cuIcon-roundclosefill text-red guoshao-shenhe" v-if="item.status == 3"></text>
						</view>

						<view class="guoshao-view-my" v-if="isBatchDel">
							<text class="cuIcon-roundcheckfill text-green guoshao-shenhe"
								v-if="batchIds.includes(item.id)"></text>
							<text class="cuIcon-roundcheckfill text-grey guoshao-shenhe"
								v-if="!batchIds.includes(item.id)"></text>
						</view>
					</view>

				</block>
			</view>

			<tui-loadmore :visible="loaddingLast" style="margin-bottom: 60px;"></tui-loadmore>
			<tui-nomore :visible="!pullUpOnLast" style="margin-bottom: 60px;"></tui-nomore>

		</view>
		<view class="box guoshao-caozuo">
			<view class="cu-bar bg-white tabbar border shop" v-if="!isBatchDel">
				<view class="bg-blue submit btn-upload" @click="toAddFilm">添加资源</view>
				<view class="bg-grey submit btn-manage" @click="manage">操  作</view>
			</view>
			<view class="cu-bar bg-white tabbar  " v-if="isBatchDel">
				<view class="bg-red submit " @click="batchDel">
					<text>删 除</text>
				</view>
				<view class="bg-grey submit " @click="cancel">
					<text>取 消</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import tuiLoading from '@/components/loading/loading';
	import tuiLoadmore from '@/components/loadmore/loadmore';
	import tuiNomore from '@/components/nomore/nomore';

	import http from "@/utils/http.js"

	import Constants from "@/utils/constants.js"

	export default {
		components: {
			tuiLoading,
			tuiLoadmore,
			tuiNomore
		},
		data() {
			return {
				classType: 0,
				select: 0,
				resourceId: null,
				
				pageNum: 1,
				loaddingLast: false,
				postsLast: [],
				pullUpOnLast: true,
				pageRefresh: 0,
				filmId: null,
				isBatchDel: false,
				isBatchClass: false,
				batchIds: [],
				
				twoClassDataSel: [],
				cIndex: 0,
			};
		},
		onLoad: function(options) {
			if(options.filmId){
				this.filmId = options.filmId
			}
			if (this.pageRefresh == 0) {
				this.pageRefresh = 1;
			}
			this.loadPostLast(true)
		},
		onShow: function() {
			
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading()
			let that = this;
			setTimeout(function() {
				that.loadPostLast(true);
				uni.hideNavigationBarLoading(); //完成停止加载图标
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom: function() {
			if (!this.pullUpOnLast) {
				return;
			}

			this.loadPostLast(false);
		},
		methods: {
		
			activeClick: function(e) {
				let index = e.currentTarget.dataset.index;

				if (this.select == index) {
					return false;
				}

				this.setData({
					select: index
				});
				this.setData({
					pageNum: 1
				});
				this.loadPostLast(true);
			},


			//加载数据
			loadPostLast: function(refresh) {
				let that = this;
				if (!refresh) {
					let page = ++that.pageNum;
					that.setData({
						loaddingLast: true,
						pageNum: page
					});
				} else {
					that.setData({
						loaddingLast: true,
						pageNum: 1
					});
				}

				uni.showLoading({
					title: '加载中',
				});
				var params = {
					url: '/film/movie/u/page',
					method: 'GET',
					data: {
						current: that.pageNum,
						size: Constants.JQ_PER_PAGE_COUNT,
						filmId: this.filmId,
						status: that.select == 0 ? '' : that.select,
					},
					callBack: function(res) {
						that.setData({
							loaddingLast: false,
							postsLast: refresh ? res.data.records : that.postsLast.concat(res.data
								.records),
							pullUpOnLast: res.data.records.length == Constants.JQ_PER_PAGE_COUNT ? true : false
						});

						uni.hideLoading();
					}
				};
				http.request(params); // 加载分类 end
			},

			contains: function(arrays, obj) {
				var i = arrays.length;
				while (i--) {
					if (arrays[i] === obj) {
						return i;
					}
				}
				return false;
			},

			//封面图点击事件
			handlerDetailClick(e) {
				let that = this;

				//批量操作
				if (that.isBatchDel) {
					let resourceId = e.currentTarget.dataset.id;
					let isExist = false;
					let size = that.batchIds.length;
					if (size > 0) {
						if (that.batchIds.includes(resourceId)) {
							isExist = true;
						}

						if (isExist) {
							//得到元素下标
							let index = that.contains(that.batchIds, resourceId);
							//删除元素
							that.batchIds.splice(index, 1);
						} else {
							that.batchIds.push(resourceId);
						}
					} else {
						that.batchIds.push(resourceId);
					}
				} else {
					this.resourceId = e.currentTarget.dataset.id;
					uni.showActionSheet({
						itemList: ['编辑资源', '删除资源'],
						success: function(res) {
							if (res.tapIndex == 0) {
								uni.navigateTo({
									url: '/pages_user/film/resources/form?resourceId=' + that.resourceId
								})
							} else if (res.tapIndex == 1) {
								that.batchIds.push(that.resourceId);
								that.deleteData();
							}
						},
						fail: function(res) {}
					});

				}

			},
			deleteData: function() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除吗?',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "删除", // 确认按钮文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						if (res.confirm) {
							that.deleteBatch();
						}
					}
				})
			},
			//删除数据
			deleteBatch: function() {
				let that = this;
				var params = {
					url: "/u/my/deleteBatch",
					method: "POST",
					data: JSON.stringify(that.batchIds),
					callBack: function(res) {
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功',
								duration: 1000,
								success: (res) => {
									that.batchIds = [];
									setTimeout(function() {
										uni.pageScrollTo({
											duration: 0,
											scrollTop: 0
										})
										that.loadPostLast(true);
									}, 500)
								}
							})
						}
					}
				};
				http.request(params);
			},

			//跳转素材上传
			toAddFilm: function() {
				uni.navigateTo({
					url: '/pages_user/film/resources/form'
				})
			},
			//管理
			manage: function() {
				this.isBatchDel = true;
			},

			batchDel: function() {
				if (this.batchIds.length == 0) {
					uni.showToast({
						title: '请选择删除的数据',
						icon: 'none'
					})
					return;
				}
				this.deleteData();
			},
			cancel: function() {
				this.isBatchDel = false;
				this.batchIds = [];
			},
			
		}
	};
</script>
<style>
	@import './list.css';
</style>
